<template>
    <div class="login-wrap">
        <div class="ms-title">壹玖会员注册</div>
        <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
     
                <el-form-item prop="account" label="手机号">
                    <el-input v-model="ruleForm.account" placeholder="输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="account">
                    <el-input v-model="ruleForm.account" placeholder="输入网名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" placeholder="设置密码"  ></el-input>
                </el-form-item>
                <el-form-item prop="confirm">
                    <el-input v-model="ruleForm.confirm" placeholder="确认密码"  ></el-input>
                </el-form-item>
                
               
                
                <el-form-item prop="name">
                    <el-input v-model="ruleForm.name" placeholder="企业全称"  ></el-input>
                </el-form-item>
                 <el-form-item prop="address">
                    <el-input v-model="ruleForm.address" placeholder="法人姓名"  ></el-input>
                </el-form-item>
                <el-form-item prop="masterGraphOn">
                        <el-form-item label="上传营业执照" prop="masterGraphOne" :rules="[ { required: true, message: '请上传图片', trigger: 'blur' }]">
                                  <div class="el-flex">
                                      <pictureview  @add-parent-img='handleImgSuccessTwo' :selectedImg="imgUrl+ruleForm.masterGraphOne"></pictureview>
                                  </div>
                         </el-form-item>
                </el-form-item>
                 <el-form-item prop="masterGraphOn">
                        <el-form-item label="企业法人委托书" prop="masterGraphOne" :rules="[ { required: true, message: '请上传图片', trigger: 'blur' }]">
                                  <div class="el-flex">
                                      <pictureview  @add-parent-img='handleImgSuccessTwo' :selectedImg="imgUrl+ruleForm.masterGraphOne"></pictureview>
                                  </div>
                         </el-form-item>
                </el-form-item>
                <el-form-item prop="address">
                    <el-input v-model="ruleForm.address" placeholder="企业法人手机"  ></el-input>
                </el-form-item>
<!--                 
                <el-form-item prop="type">
                    <el-input v-model="ruleForm.type" placeholder="企业类型"  ></el-input>
                </el-form-item>
                
                <el-form-item prop="contact">
                    <el-input v-model="ruleForm.contact" placeholder="联系人"  ></el-input>
                </el-form-item> -->
                <el-form-item prop="yzm" v-if="tabs">
                    <el-input placeholder="验证码" v-model="ruleForm.yzm" :max="4" @keyup.enter.native="submitForm('ruleForm')"  :class='disabled001?"disable":"abled"'>
                         <template slot="append">   <el-button type="success" @click='sendCode' :disabled="disabled001" >{{codeWord}}</el-button></template>
                    </el-input>
                </el-form-item>
               <div> 同意<router-link>用户协议</router-link>和 交易条款</div>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
                </div>
                <p style="font-size:12px;line-height:30px;color:#999;margin-top:20px;">Tips :会员审核一般7天内，审核通过会发送短信到您手机。</p>
            </el-form>
        </div>
    </div>
</template>

<script>
import pictureview from "@/components/my-components/pictureview/index";

    export default {
        data: function(){
            return {
                ruleForm: {
                    account: '',
                    yzm:'',
                    name:'',
                    address:'',
                    type:'',
                    contact:'',
                    password: '',
                    confirm:'',
                    masterGraphOne:'',
                },
                rules: {
                    account: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    yzm: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ],
                     name: [
                        { required: true, message: '请输入企业全称', trigger: 'blur' }
                    ],
                     address: [
                        { required: true, message: '请输入企业地址', trigger: 'blur' }
                    ],
                     type: [
                        { required: true, message: '请输入企业类型', trigger: 'blur' }
                    ],
                     contact: [
                        { required: true, message: '请输入联系人姓名', trigger: 'blur' }
                    ],
                     confirm: [
                        { required: true, message: '请确认密码', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    masterGraphOn: [
                        { required: true, message: '请上传营业执照', trigger: 'blur' }
                    ],
                },
                labelPosition: 'left',
                tabs:true,
                disabled001:false,
                codeWord:"发送验证码",
                wait:0,
            }
        },
        methods: {
             sendCode(){
            if(!this.ruleForm.account) return  this.$message({
                  message: "手机号未填",
                  type: "warning"
                });
            if(!/^1[34578]\d{9}$/.test(this.ruleForm.account)) return  this.$message({
                  message: "手机号格式不对",
                  type: "warning"
                });
            // this.sendcode({phone: this.ruleForm.account});
            const that = this;
            function time() {
                if (that.wait == 0 ) {  //结束或错误重新开始
                    that.disabled001=false;            
                    that.codeWord="发送验证码";  
                    that.wait = 60;  
                } else {  
                    that.disabled001=true;   
                    that.codeWord="重新发送(" + that.wait + ")";  
                    that.wait--;
                    setTimeout(function() {  
                        time()  
                    },1000)  
                }  
            }
            time()
        },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method:"post",
                            url: "/login",
                            data: this.ruleForm
                        }).then((res)=>{
                            if(res.data.code==0) {
                            this.$message.success('登录成功');
                            localStorage.setItem('user',JSON.stringify(res.data.data));
                            this.$router.push('/');
                             }else{
                            this.$message.error(res.data.msg);
                            }
                    })
                    } else {
                        console.log('error submit!!');
                         return false;
                     }
            });
            },
            handleImgSuccessTwo(picture) {
                this.$set(this.ruleForm, "masterGraphOne", picture.id);
            },

        },
        components: {
            pictureview,
        },
        watch:{
            'labelPosition'(value){
                if(value=="right"){
                    this.tabs=false;
                }else{
                    this.tabs=true;
                }

            }
        }
    }
</script>

<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
    }
    .ms-title{
        position: absolute;
        top:50%;
        width:100%;
        margin-top: -417px;
        text-align: center;
        font-size:30px;
        color: #fff;

    }
    .ms-login{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 390px;
    height: 700px;
    margin: -341px 0 0 -235px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
    }
    
</style>
<style>
.ms-login .el-radio-group{
    text-align: center;
    margin-bottom: 10px;
    width: 100%;}
 .ms-login .abled .el-input-group__append{background: #409eff;color: #fff;border: 1px solid #409eff;}
.ms-login .el-form-item__label{width: 112px !important;line-height:122px !important;}
</style>

